<template>
  <div>
       <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{path:'/home'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>订单列表</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card>
           <!-- 添加&搜索区 -->
          <el-row :gutter=20>
              <el-col :span=9>
                  <el-input  clearable v-model="queryOrder.query" placeholder="请输入内容">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </el-col>
          </el-row>
          <!-- 表格 -->
          <el-table :data='orderList' border>
              <el-table-column type='index'></el-table-column>
              <el-table-column label="订单编号" prop='order_number' width='350'></el-table-column>
              <el-table-column label="订单价格" prop='order_price' width='100'></el-table-column>
              <el-table-column label="是否付款" prop='pay_status' width='100'>
                  <template slot-scope="scope">
                      <el-tag v-if="scope.row.pay_status==='0'" type="danger">未付款</el-tag>
                      <el-tag v-else type="success">已付款</el-tag>
                  </template>
              </el-table-column>
              <el-table-column label="是否发货" prop='is_send' width='100'></el-table-column>
              <el-table-column label="下单时间" prop='create_time' width='200'>
                  <!-- 过滤器 -->
                  <template slot-scope="scope">
                      {{scope.row.create_time | dateFormat}}
                  </template>
              </el-table-column>
              <el-table-column label="操作" width='250'>
                  <template slot-scope="scope">
                    <!-- 修改地址按钮 -->
                    <el-button
                    type="primary"
                    icon="el-icon-edit"
                    size="mini"
                    @click='showDialog'
                    ></el-button>
                    <!-- 查看物流进度 -->
                    <el-button
                    type="success"
                    icon="el-icon-location"
                    size="mini"
                    @click='showProgressDialog(scope.row)'
                    ></el-button>
                  </template>
              </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryOrder.pagenum"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
      </el-card>
      <!-- 修改地址对话框 -->
      <el-dialog
        title="修改地址"
        :visible.sync="editLocationDialogVisible"
        width="50%"
        @close='editLocationDialogClose'>
        <!-- 表单 -->
        <el-form :model="editLocationForm" :rules="editLocationFormRules" ref="editLocationFormRef" label-width="100px">
          <el-form-item label="省市区/县" prop="address1">
          <!-- 城市级联选择器 -->
            <el-cascader
                v-model="editLocationForm.address1"
                :options="cityData"
                :props="{ expandTrigger: 'hover' }"
                @change="handleChange">
            </el-cascader>
          </el-form-item>
          <el-form-item label="详细地址" prop="address2">
            <el-input v-model="editLocationForm.address2"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button @click="editLocationDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editLocationDialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 显示物流状态对话框 -->
      <el-dialog
        title="物流状态"
        :visible.sync="progressDialogVisible"
        width="50%"
        @close='progressDialogClose'>
        <!-- 物流时间线 -->
        <el-timeline>
            <el-timeline-item
            v-for="(order, index) in orderProgress"
            :key="index"
            :timestamp="order.time">
            {{order.context}}
            </el-timeline-item>
        </el-timeline>
        <span slot="footer">
          <el-button @click="progressDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="progressDialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
// 导入城市数据
import cityData from './citydata'
export default {
    name:'Order',
    data(){
        return{
            // 获取订单数据列表请求参数
            queryOrder:{
                query:'',
                pagenum:1,
                pagesize:5
            },
            // 保存获取的订单列表数据
            orderList:[],
            // 全部订单
            total:0,
            // 控制修改地址对话框是否出现
            editLocationDialogVisible:false,
            // 保存修改地址的对象
            editLocationForm:{
                address1:[],
                address2:''
            },
            // 修改地址的验证规则
            editLocationFormRules:{
                address1:[
                    {required:true,message:'请选择省市区县',trigger:'blur'}
                ],
                address2:[
                    {required:true,message:'请填写详细地址',trigger:'blur'}
                ]
            },
            // 城市数据
            cityData,
            // 控制物流状态状态对话框是否出现
            progressDialogVisible:false,
            // 保存订单物流信息
            orderProgress:[]
        }
    },
    created(){
        this.getOrderList()
    },
    methods:{
        async getOrderList(){
            const {data:res} = await this.$http.get(`orders`,{params:this.queryOrder})
            if(res.meta.status!==200) return this.$message.eror('获取订单列表失败')
            console.log(res.data);
            this.orderList=res.data.goods
            this.total=res.data.total
        },
        // 页码发生变化时
        handleCurrentChange(newPagenum){
            this.queryOrder.pagenum=newPagenum
            this.getOrderList()
        },
        // 页面大小发生变化
        handleSizeChange(newPagesize){
            this.queryOrder.pagesize=newPagesize
            this.getOrderList()
        },
        // 弹出修改地址对话框
        showDialog(){
            this.editLocationDialogVisible=true
        },
        // 修改地址对话框关闭时触发
        editLocationDialogClose(){
            // 重置
            this.$refs.editLocationFormRef.resetFields()
        },
        // 级联选择器发生变化时触发
        handleChange(){},
        // 弹出查看物流状态对话框
        async showProgressDialog(row){
            // 发送请求获取订单物流状态
            const {data:res} = await this.$http.get(`/kuaidi/1106975712662`)
            if(res.meta.status!==200) return this.$message.error('获取订单物流信息失败')
            console.log(res.data);
            this.orderProgress=res.data
            this.progressDialogVisible=true
        },
        // 物流状态对话框关闭时触发
        progressDialogClose(){}
    }
}
</script>

<style scoped>
    .el-card{
        margin-top: 20px;
    }
    .el-table{
        margin: 20px 0;
    }
</style>